import React, { Component } from 'react'
import { withRouter, Link } from 'react-router-dom'
import Tab from './../common/TabVertical'
import Empty from './../common/Empty'
import Page from './../common/Page'
import api from './../../serve/api'
import styles from './SpecialList.module.scss'

 class SpecialList extends Component {
  constructor(props) {
    super(props)
    // const { type } = qs.parse(props.location.search)
    this.state = {
      page: 1,
      typeId: '',
      fid: '',
      pageTotal: '',
      pageSize: 99999,
      list: [],
      // type,
      types: [],
      selected: 0
    }
  }

  componentDidMount() {
    const { params } = this.props.match
    const id = params.id
    this.getAllTypes(id)
  }

  async getAllTypes(fid) {
    const { code, result } = await api.listSpecialTypes({ fid })
    if (code !== '000000') {
      return
    }
    this.setState({
      types: result || []
    })
    if (result.length > 0) {
      const first = result[0]
      this.getSpecialList(first.id, fid, 1)
    }
  }

  async getSpecialList(typeId, fid, page) {
    const { code, result, resultNum } = await api.listSpecialIG({ typeId, fatherTypeId: fid, page, pageSize: this.state.pageSize})
    if (code !== '000000') {
      return
    }
    this.setState({
      page,
      typeId,
      fid,
      list: result || [],
      pageTotal: resultNum
    })
  }

  getCurrentPage(currentPage) {
    this.getSpecialList(this.state.typeId, this.state.fid, currentPage)
  }

  onTab(item, index) {
    this.setState({
      selected: index,
      typeId: item.id
    })
    this.getSpecialList(item.id, this.state.fid, 1)
  }

  onSteps(item) {
    this.props.history.push(`/mainPage/pageDetail/special/${item.id}`)
  }

  render() {
    const { type, types, list, pageTotal, page, selected } = this.state
    return (
      <div className={styles.special_list}>
        <div className={styles.crumbs}>
          <div className={styles.postion_div}>
            当前位置: <Link to={'/mainPage/main'}>首页</Link>> 决策专刊> <span>{type === '0' ? '全省社科分院（所）专刊' : '全省智库单位（机构）专刊'}</span>
          </div>
        </div>
        <div className={styles.special_list_container}>
          <Tab tabs={types} selected={selected} onTab={(item, index) => this.onTab(item, index)} />
          <div className={styles.special_steps_content}>
            {list.length === 0 && <Empty title="暂无数据" />}
            <div className={styles.steps_list}>
              {list.map((item, index) => { 
                return (
                  <div key={index} className={styles.steps}>
                    <div className={styles.year}>
                      <span>{item.s_year || ''}</span>
                    </div>
                    <div className={styles.list} style={ index === list.length - 1 ? {border: 0} : {}}>
                      {item.list && item.list.map((val, index) => {
                        return (
                          <div key={val.id} className={styles.list_item} onClick={() => this.onSteps(val)}>
                            <div className={styles.em_div}><p className={styles.point}/></div>
                            <span>{val.title || ''}</span>
                            <div 
                              className={styles.line} 
                              style={(item.list.length === 0 || index === item.list.length - 1) ? { display: 'none' } : {}} 
                            />
                          </div>
                        )
                      })}
                    </div>
                  </div>
                )
              })}
            </div>
            {list.length > 0 && <Page 
              pageConfig={{totalPage: pageTotal, pageSize: this.state.pageSize, currentPage: page }}
              pageCallbackFn={currentPage => this.getCurrentPage(currentPage)}
            />}
          </div>
        </div>
      </div>
    )
  }
}
export default withRouter(SpecialList)
